<template >
  <el-dialog  :id="target" width="600px"  :close-on-click-modal="closeonclickmodal" :title="getdialogTitle()" @open="listenopen()"
             @close="close"
             :visible="dialogshow">
    <div >
      <el-input style="margin-bottom:12px;"
                placeholder="输入关键字进行过滤"
                v-model="filterText" clearable>
      </el-input>
      <el-tree
        :filter-node-method="filterNode"
        :data="PERMS"
        :props="myprops"
        node-key="id"
        ref="tree"
        show-checkbox
        default-expand-all
        :expand-on-click-node="false"
        style="overflow-y: auto;width:100%;max-height:340px"
      >
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ data.desc }} <el-tag v-if="data.id!=null"  size="mini" :type="data.mark?'success':'info'">{{data.mark?'已拥有':'未拥有'}}</el-tag></span>
        </div>
      </el-tree>
    <div style="margin-top:20px;"></div>
    <el-row style="text-align: right">
      <el-button size="mini" @click="dialogshow = false">取 消</el-button>
      <el-button size="mini" type="primary" @click="toaddPerm('dialoginfo')">保 存</el-button>
    </el-row>
    </div>
    <div style="margin-top:20px"></div>
  </el-dialog>
</template>
<script>
  // import {Message} from "element-ui"

  export default {
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    inject: ["reload"],
    data() {
      return {
        target:"ediRolePerms",
        filterText: '',
        PERMS: [],
        isajax: false,
        closeonclickmodal: false,
        formLabelWidth: '80px',
        myprops:{
          label:"desc",
          children:"perms"
        }
      }
    },
    props: ['dialogshow', 'dialoginfo'],
    methods: {
      getCheckedKeys() {
        var arr = [];
        var arr1 = this.$refs.tree.getCheckedKeys();
        for(var i = 0;i<arr1.length;i++){
          //无法选中的选项的id是undefind。因为这个分组名称其实不存在。只是前端组织展示的
          // console.log(arr1[i]);
          if(arr1[i]!=null&&arr1[i]!=undefined) {
            arr.push(arr1[i]);
          }
        }
        return arr;
      },
      setCheckedKeys(arr) {
        this.$refs.tree.setCheckedKeys(arr);
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([]);
      },
      filterNode(value, data) {
        if (!value) return true;
        // console.log(data);
        return data.desc.indexOf(value) !== -1;
      },
      init() {
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.getAllSysPermTreeMarkByRoleId,"id":this.target});
        this.proAPI.getJson(this.proAPI.URLS.getAllSysPermTreeMarkByRoleId, {roleId: this.dialoginfo.id}).then((res) => {
            this.PERMS = res.data;
            this.setCheckedKeys(this.getMarkNode([], res.data));
        })
      },
      getMarkNode(target,dataArr) {
        for (var i = 0; i < dataArr.length; i++) {
          dataArr[i].id=null;
          dataArr[i].disabled=true;//设定为无法选中
          for(var j=0;j<dataArr[i].perms.length;j++){
            if(dataArr[i].perms[j].mark){
              target.push(dataArr[i].perms[j].id);
            }
          }
        }
        // console.log("最终已经存在的节点是",target);
        return target;
      },
      getdialogTitle() {
        return "编辑【" + this.dialoginfo.name + "】角色权限";
      },
      listenopen() {
        this.init();
        if (this.$refs['dialoginfo'] != null) {
          this.$refs['dialoginfo'].resetFields();
        }
        // console.log(this.dialogshow);
      },
      close() {
        this.$emit('changedialogshow');
      },
      toaddPerm() {
        this.$confirm('确定修改该角色权限吗?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          callback: action => {
            // console.log(action);
            if (action == "confirm") {
              this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.modifyRolePerms,"id":this.target});
              this.proAPI.postJson(this.proAPI.URLS.modifyRolePerms, {roleId: this.dialoginfo.id, perms: this.getCheckedKeys()}).then((res) => {
                  // console.log(res);
                  this.$message({
                    type:"success",
                    "message": res.message
                  })
                  this.reload();
              });
            }
          }
        });
      }
    },
    updated() {
      // console.log(333);
    },
    mounted() {
      this.init();
      // console.log("开始创建！！！！！！！！");
    }
  };
</script>
<style lang="css">
  .el-dialog__body {
    padding: 10px 20px 1px 20px;
    color: #606266;
    font-size: 14px;
  }

  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
</style>
